<script setup lang="ts">
import { getClassListByUserId } from '@/api/class';
import MyClassIcon from '@/assets/class/MyClassIcon.vue';
import type { Cls } from '@/api/class/type';
import { useUserStore } from '@/store/user';
import { onMounted, ref } from 'vue';
import { router } from '@/router';

const classList = ref([] as Cls[]);

onMounted(() => {
    const userStore = useUserStore();
    const userId = userStore.getId;
    getClassListByUserId(userId).then((res) => {
        classList.value = res.data;
    });
})

const toClass = (item: Cls) => {
    router.push({
        name: 'ClassHome',
        query: {
            "id": item.id
        }
    })
}

</script>

<template>
    <div class="container">
        <div class="header">
            <MyClassIcon></MyClassIcon>
            <p style="margin: 0; margin-left: 3px;">我的班级</p>
        </div>
        <div class="body">
            <div v-for="(item, _index) in classList" class="item" @click="toClass(item)">
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    padding: 3%;
    height: 100%;
    width: 94%;
    background-color: white;
    border-radius: 15px;
    .header {
        display: flex;
        align-items: center;
    }
    .body {
        width: 100%;
        .item {
            margin: 3%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
            background-color: rgba(250, 235, 215, 0.532);
            border-radius: 15px;
        }
    }
}
</style>